@import plugins.Context
@import org.silkframework.rule.{TransformRule, TransformSpec}
@import controllers.rules.routes.Assets
@import controllers.core.routes.{Assets => CoreAssets}
@import org.silkframework.entity.ValueType
@import org.silkframework.runtime.serialization.XmlSerialization.toXml

@(context: Context[TransformSpec], rule: TransformRule)(implicit session: play.api.mvc.Session)

@import org.silkframework.workspace.User
@import org.silkframework.rule.input.Transformer

@header = {
  <link type="text/css" href="@Assets.at("stylesheets/editor/editor-reset.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/editor/editor.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/editor/status.css")" rel="stylesheet" />

  <script type="text/javascript" src="@Assets.at("js/excanvas.js")"></script>
  <script type="text/javascript" src="@CoreAssets.at("libs/jsplumb/jsPlumb-2.1.7.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/editor.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/status.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/serializeRule.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/editableLabel.js")"></script>

  <script type="text/javascript">
    var inEditorEnv = true;
    var projectName = '@context.project.name';
    var taskName = '@context.task.id';
    var ruleIndex = '/@rule.id.toString';
    var editorUrl = baseUrl + '/transform/' + projectName + '/' + taskName + '/editor';
    var apiUrl = '@config.baseUrl/transform/tasks/@context.project.name/@context.task.id';
    var serializationFunction = serializeTransformRule;
  </script>

  @** As the editor does not manage the meta data, we just hold it and attach it to updated rules. **@
  <script id="rule-metadata" type="text/xml">
    @toXml(rule.metaData)
  </script>
}

@toolbar = {
  <ul>
    <li>
      <a class="mdl-button mdl-js-button mdl-button--icon" href="../editor/rule/@rule.id">
        <i class="material-icons">arrow_back</i>
      </a>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <button id="undo" class="mdl-button mdl-js-button mdl-button--icon" onclick="undo();">
        <i class="material-icons">undo</i>
      </button>
    </li>
    <li>
      <button id="redo" class="mdl-button mdl-js-button mdl-button--icon" onclick="redo();">
        <i class="material-icons">redo</i>
      </button>
    </li>
    <li>
      <div class="spacer"/>
    </li>
      <li>
      <button id="button_reload_paths" class="mdl-button mdl-js-button mdl-button--icon" onclick="reloadPropertyPaths();">
        <i class="material-icons">cached</i>
      </button>
      <div class="mdl-tooltip mdl-tooltip--large" for="button_reload_paths">
        Reload Property Paths
      </div>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <label>Name:</label>
      <div id="input_rulename" class="mdl-textfield mdl-js-textfield">
        <input id="rulename" class="mdl-textfield__input" type="text" onchange="modifyLinkSpec()" value="@rule.id" />
      </div>
      <div class="mdl-tooltip mdl-tooltip--large" for="input_rulename">
        The name of this transformation rule.
      </div>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <label>Target Property:</label>
      <div id="input_targetproperty" class="mdl-textfield mdl-js-textfield">
        <input id="targetproperty" class="mdl-textfield__input" type="text" onchange="modifyLinkSpec()" value="@rule.target.map(_.propertyUri.serialize(context.project.config.prefixes)).getOrElse("")" />
      </div>
      <div class="mdl-tooltip mdl-tooltip--large" for="input_targetproperty">
        The target property.
      </div>
    </li>
    <li>
      <label>Target Type:</label>
      <div id="input_type" class="mdl-textfield mdl-js-textfield">
        <input id="targettype" class="mdl-textfield__input" type="text" onchange="modifyLinkSpec()" value="@rule.target.map(t => ValueType.valueTypeId(t.valueType)).getOrElse("AutoDetectValueType")" disabled/>
      </div>
      <div class="mdl-tooltip mdl-tooltip--large" for="input_type">
        The target type.
      </div>
    </li>
  </ul>

  @status()

  <div id="score-widget">@* Filled by updateScore() *@</div>
}

@content = {
  <div class="draggables mdl-shadow--2dp">
    <div class="palette-header">
    </div>

    <div id="operators-grouped">
      <div id="paths">
        <div id="loading" style="width:230px;">loading ...</div>
        <script type="text/javascript">
          getPropertyPaths('#paths');
        </script>
      </div>

      <div id="operators">
        @operators("Transformations", "transform", Transformer.pluginsByCategory, context.project)
      </div>
    </div>
  </div>

  <div class="wrapperEditor">

    <div class="droppable_outer">

      <div id="droppable" class="mdl-shadow--2dp">
        @renderRule(
          rule = rule.operator,
          project = context.project
        )
      </div>

    </div>

  </div>
}

@main(Some(context))(header)(toolbar)(content)